<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请调换宿舍</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>

    <style>
        /*设置背景*/
        body{
            background-color: #f3ebf6;
        }
        /*最上方图片居中*/
        #img_four_1{
            height: 154px;
            width: 457px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 100px;
        }
        #div_four_size{
            width: 500px;
            margin: auto;
        }
        /*表单项*/
        .td_left{
            width: 100px;
            height:30px;
            text-align: right;
            padding-top: 30px;
        }
        .td_right{
            width: 310px;
            height:30px;
            padding-left: 10px;
            padding-top: 30px;
        }
        /*按钮*/
        #btn_sub{
            margin-top: 20px;
            margin-left: 50%;
        }
    </style>
    <script>
        //房间号
        function checkRoom() {
            var room = $("#new_room").val();
            var reg = /^\d{1,3}$/;
            return reg.test(room);
        }
        //床号号
        function checkBed() {
            var bed = $("#new_bed").val();
            var reg = /^\d{1,2}$/;
            return reg.test(bed);
        }

        $(function () {
            //表单提交
            $("#form_apply").submit(function () {
                //两个表单项满足正则才提交
                if (checkRoom() && checkBed()){
                    $.get("stu/swap",$("#form_apply").serialize(),function () {
                        alert("申请已提交！");
                        location.reload();
                    });
                }
                return false;
            });

            //房间号
            $("#new_room").blur(function () {
                if (checkRoom()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //床号
            $("#new_bed").blur(function () {
                if (checkBed()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
        });
    </script>
</head>
<body>
    <div id="img_four_1"><img src="../img/stu_5.png" id="img_hint"></div>

    <div id="div_four_size">
        <form action="#" method="get" id="form_apply">
            <table>
                <tr>
                    <td class="td_left">
                        <label for="new_room">房间号</label>
                    </td>
                    <td class="td_right">
                        <input type="text" class="form-control" id="new_room" name="newRoom" placeholder="请输入您要调换的新房间号,请直接输入数字"/>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="new_bed">床号</label>
                    </td>
                    <td class="td_right">
                        <input type="text" class="form-control" id="new_bed" name="newBed" placeholder="请输入您要调换的新床号,请直接输入数字"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="提交"></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="float: right;margin-right: 150px">
        <a href="stu_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
</body>
</html>
